<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab 标签</title>
    <style>

        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .tabs {
            width: 400px;
            margin: 30px auto;
            background-color: #FFF;
            border: 1px solid #C0DCC0;
            box-sizing: border-box;
        }

        .tabs nav {
            height: 40px;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            background-color: #C0DCC0;
            display: flex;
        }

        nav a {
            display: block;
            width: 100px;
            border-right: 1px solid #FFF;
            color: #000;
            text-decoration: none;
        }

        nav a:last-child {
            border-right: 0 none;
        }

        nav a.active {
            background-color: #9BAF9B;
        }

        .cont {
            overflow: hidden;
            /*display: none;*/
        }

        .cont ol {
            line-height: 30px;
        }

    </style>

    <!--[if lte IE 6]>

    <![endif]-->
</head>
<body ng-app="Tab">

<div class="tabs" ng-controller="TabController">
    <nav>
        <a href="javascript:;" ng-click="switch('local')" ng-class="{active: type == 'local'}">国内新闻</a>
        <a href="javascript:;" ng-click="switch('globle')" ng-class="{active: type == 'globle'}">国际新闻</a>
        <a href="javascript:;" ng-click="switch('ty')" ng-class="{active: type == 'ty'}">体育新闻</a>
        <a href="javascript:;" ng-click="switch('yl')" ng-class="{active: type == 'yl'}">娱乐新闻</a>
    </nav>
    <div ng-switch on="type">
        <section class="cont" ng-switch-when="local">
            <ol>
                <li>河南再次发生矿难，死伤人数超砖石ddddddddddddd过100dddads</li>
                <li>禽流感在全国物农延，温家宝指示</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>猪流感在广东群体性暴发</li>
                <li>禽流感在全农作物继续蔓延，温家宝指示</li>
                <li>猪流感在广东群体性暴发</li>
            </ol>
        </section>
        <section class="cont" ng-switch-when="globle">
            <ol>
                <li>河感在生矿难，死伤在全10</li>
                <li>禽流感在感在广1处继续蔓延，温家宝指示</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>猪流感在广在全国暴发</li>
                <li>禽流感在全国多处继续蔓延，温家宝指示</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>猪流感在广东群体性暴发</li>
            </ol>
        </section>
        <section class="cont" ng-switch-when="ty">
            <ol>
                <li>河南再次发生矿难，死伤人数超过100</li>
                <li>禽流感在全国多处农作物农延，温家宝指示</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>猪流感在广东群体性暴发</li>
                <li>禽流感在全农作物继续蔓延，温家宝指示</li>
                <li>南方大农作物减产绝收面积上亩</li>
                <li>猪流感在广东群体性暴发</li>
            </ol>
        </section>
        <section class="cont" ng-switch-when="yl">
            <ol>
                <li>河南再次发生矿难，死伤人数超过100</li>
                <li>禽流感次发生蔓延，温家宝指示</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>猪流感在广减产绝收发</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>猪流感在广东群体性暴发</li>
            </ol>
        </section>
    </div>
</div>
<script src="./lib/angular.min.js"></script>
<script>
    var Tab = angular.module('Tab',[]);
    Tab.controller('TabController',['$scope',function ($scope) {

        $scope.type = 'local';

        $scope.switch = function (type) {
            console.log(type);
            $scope.type = type;
        }
    }])


</script>
</body>
</html>